<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" scope="page"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户图片展示</title>
 <%@ include file="../../jsp/common.jsp" %> 
<style type="text/css">
*{padding:0; margin:0}
#mbOverlay { position:fixed; z-index:9998; top:0; left:0; width:100%; height:100%; background-color:#000; cursor:pointer; }
#mbOverlay.mbOverlayFF { background:transparent url(80.png) repeat; }
#mbOverlay.mbOverlayIE { position:absolute; }
#mbCenter { height:557px; position:absolute; z-index:9999; left:50%; background-color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 10px 40px rgba(0, 0, 0, 0.70); -webkit-box-shadow:0 10px 40px rgba(0, 0, 0, 0.70); }
#mbCenter.mbLoading { background:#fff url(${basePath}/static/plugins/switchImag/images/WhiteLoading.gif) no-repeat center; -moz-box-shadow:none; -webkit-box-shadow:none; }
#mbImage { left:0; top:0; font-family:Myriad, Verdana, Arial, Helvetica, sans-serif; line-height:20px; font-size:12px; color:#fff; text-align:left; background-position:center center; background-repeat:no-repeat; padding:10px; }
#mbImage a, #mbImage a:link, #mbImage a:visited { color:#ddd; }
#mbImage a:hover, #mbImage a:active { color:#fff; }
#mbBottom { min-height:20px; font-family:Myriad, Verdana, Arial, Helvetica, sans-serif; line-height:20px; font-size:12px; color:#999; text-align:left; padding:0 10px 10px; }
#mbTitle { display:inline; color:#999; font-weight:bold; line-height:20px; font-size:12px; }
/* 
#mbNumber { background:url(${basePath}/static/plugins/switchImag/images/mbNumber_bg.gif) no-repeat center; display:inline; color:#C00; line-height:26px; font-size:12px; position: absolute; bottom: 10px; right: 10px; text-align: center; width:65px; height:26px; }
 */
#mbCaption { display:block; color:#999; line-height:14px; font-size:10px; }
#mbPrevLink, #mbNextLink, #mbCloseLink { display:block; float:right; height:20px; margin:0; outline:none; }
#mbPrevLink { width:32px; height:100px; background:transparent url(${basePath}/static/plugins/switchImag/images/CustomBlackPrevious.gif) no-repeat center; position: absolute; top:38%; left:-32px; }
#mbNextLink { width:32px; height:100px; background:transparent url(${basePath}/static/plugins/switchImag/images/CustomBlackNext.gif) no-repeat center; position: absolute; top:38%; right:-32px; }
#mbCloseLink { width:24px; background:transparent url(${basePath}/static/plugins/switchImag/images/CustomBlackClose.gif) no-repeat center; position:absolute; top:10px; right:10px; }
#mbError { position:relative; font-family:Myriad, Verdana, Arial, Helvetica, sans-serif; line-height:20px; font-size:12px; color:#fff; text-align:center; border:10px solid #700; padding:10px 10px 10px; margin:20px; -moz-border-radius:5px; -webkit-border-radius:5px; }
#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active { color:#d00; font-weight:bold; text-decoration:underline; }
.layout_default{float:left; margin:5px}
.mod_gallerylist{width:665px; margin:0 auto}
.meta{font-size:12px; text-align:center;}
.image_container img{border:1px solid #CCC; padding:2px}
.meta a{color:#333; text-decoration:none}

</style>
<script type="text/javascript" src="${basePath}/static/plugins/switchImag/js/mootools-core.js"></script>
<script type="text/javascript" src="${basePath}/static/plugins/switchImag/js/mediabox.js"></script>

<script type="text/javascript" src="${basePath}/static/plugins/imagecanvas/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="${basePath}/static/plugins/imagecanvas/js/jquery.rotate.js"></script>

<script type="text/javascript"> 

</script>
</head>
<body>
<div style="background:#FFF; padding:50px; height:460px">
<!--效果开始-->
<div class="mod_gallerylist">
  <div class="layout_default">
    <p class="info"><span class="date"></span> <span class="author"></span></p>
     
    <div   class="image_container">
    <a href="${orders.img0202}" rel="lightbox[ostec]" title="图像1">
     <img src="${orders.img0202}"     width="200" height="120" alt="图像1" > </a>
    </div>
                   
    <div class="meta"><spa>图像1</spa></div>
  </div>
  
  <div class="layout_default">
    <p class="info"><span class="date"></span> <span class="author"></span></p>
    <div class="image_container"> 
    <a href="${orders.img0203}" rel="lightbox[ostec]" title="图像2"> 
    <img src="${orders.img0203}" width="200" height="120" alt="图像2" > </a> </div>
    <div class="meta"><spa>图像2</spa></div>
  </div>
  
  <div class="layout_default">
    <p class="info"><span class="date"></span> <span class="author"></span></p>
    <div class="image_container"> 
    <a href="${basePath}/static/plugins/switchImag/images/intke_big1337449105730755107.jpg" rel="lightbox[ostec]" title="图片3"> 
    <img src="${basePath}/static/plugins/switchImag/images/intke_sml1337449105477712782.jpg" alt="图片3" > </a> </div>
    <div class="meta"><spa>图像3</spa></div>
  </div>
  <div class="layout_default">
    <p class="info"><span class="date"></span> <span class="author"></span></p>
    <div class="image_container"> 
    <a href="${basePath}/static/plugins/switchImag/images/intke_big133744930430337079.jpg" rel="lightbox[ostec]" title="图像4"> <img src="${basePath}/static/plugins/switchImag/images/intke_sml1337449304825420900.jpg" alt="站长素材文字特效" > </a> </div>
    <div class="meta"><spa>图像4</spa></div>
  </div>
  <div class="layout_default">
    <p class="info"><span class="date"></span> <span class="author"></span></p>
    <div class="image_container"> 
    <a href="${basePath}/static/plugins/switchImag/images/intke_big13374494201592646066.jpg" rel="lightbox[ostec]" title="图像5"> <img src="${basePath}/static/plugins/switchImag/images/intke_sml13374494201301118452.jpg" alt="站长素材网站教程" > </a> </div>
    <div class="meta"><spa>图像5</spa></div>
  </div>
  <div class="layout_default">
    <p class="info"><span class="date"></span> <span class="author"></span></p>
    <div class="image_container"> 
    <a href="${basePath}/static/plugins/switchImag/images/intke_big13374495191424249848.jpg" rel="lightbox[ostec]" title="图像6"> <img src="${basePath}/static/plugins/switchImag/images/intke_sml13374495191050454634.jpg" alt="站长素材web应用" > </a> </div>
    <div class="meta"><spa>图像6</spa></div>
  </div>
   
</div>
<script type="text/javascript">
Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    var rel0 = this.rel.replace(/[[]|]/gi," ");
    var relsize = rel0.split(" ");
    return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
  });
};
window.addEvent("domready", Mediabox.scanPage);
</script>
<!--End-->
</div>
 
</body>
</html>